import { Form, Input } from "antd";
//@ts-ignore
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
import { useEffect, useState } from "react";

function index({ form, setData }: any) {
  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法

  // 编辑器内容
  const [html, setHtml] = useState("<p>hello</p>");

  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    setTimeout(() => {
      setHtml("<p>hello world</p>");
      setData(html);
    }, 1500);
  }, []);

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法

  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    placeholder: "请输入内容...",
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);
  return (
    <>
      <Form form={form} style={{ marginTop: 20 }}>
        <Form.Item name="title" label="标题">
          <Input placeholder="请输入标题" allowClear />
        </Form.Item>
        <Form.Item name="password" label="作者">
          <Input placeholder="请输入作者" allowClear />
        </Form.Item>
        <Form.Item name="email" label="邮箱">
          <Input placeholder="请输入邮箱" allowClear />
        </Form.Item>
        <Form.Item name="content" label="内容">
          <div style={{ border: "1px solid #ccc", zIndex: 100 }}>
            <Toolbar
              editor={editor}
              defaultConfig={toolbarConfig}
              mode="default"
              style={{ borderBottom: "1px solid #ccc" }}
            />
            <Editor
              defaultConfig={editorConfig}
              value={html}
              onCreated={setEditor}
              onChange={(editor: { getHtml: () => any }) =>
                setHtml(editor.getHtml())
              }
              mode="default"
              style={{ height: "500px", overflowY: "hidden" }}
            />
          </div>
        </Form.Item>
      </Form>
    </>
  );
}

export default index;
